import { Image, StyleSheet, Animated, Easing } from 'react-native'
import CustomButton from 'src/components/button/CustomButton'
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { ONE_PIXEL, ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomTextEllipsize from 'src/components/custom-text-ellipsize'
import { showTipModal } from 'src/utils/ModalUtil'
import { deleteCommonLanguage } from 'src/utils/RequestAPI'
import { DismissLoading, ShowLoading } from 'src/utils/ToastUtil'

const deleteW = ScaleS(34)
const editW = ScaleS(66)
const animateTime = 200
export default class CommonWordItem extends PureComponent {
  static defaultProps = {
    showDelete: false,
    showEdit: false,
    isPageB: false
  }

  static propTypes = {
    item: PropTypes.object,
    itemPress: PropTypes.func,
    deleteCompleted: PropTypes.func,
    onEditPress: PropTypes.func,
    showDelete: PropTypes.bool,
    showEdit: PropTypes.bool,
    userId: PropTypes.number,
    isPageB: PropTypes.bool,
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    itemH: PropTypes.number,
    onSortPress: PropTypes.func,
    index: PropTypes.number
  }

  constructor (props) {
    super(props)
    this.deleteW = new Animated.Value(0)
    this.editW = new Animated.Value(0)
    this.itemH = new Animated.Value(0)
    this.tipConfig = {
      onCancel: this._tipCancel,
      onConfirm: this._tipConfirm,
      titleText: '提醒',
      contentText: '确定要删除这条常用语吗？'
    }
  }

  render () {
    const { item, style, onEditPress, itemH, onSortPress, index } = this.props
    return (
      <Animated.View style={[styles.commonItem].concat(style, { height: itemH, top: this.itemH })}>
        <Animated.View style={{ width: this.deleteW, overflow: 'hidden' }}>
          <CustomButton params={item} onPress={this._onDeletePress}>
            <Image style={styles.deleteTextImg} source={require('src/imgC/message/message_delete2.png')}/>
          </CustomButton>
        </Animated.View>
        <CustomButton style={styles.commonWordTextBtn} params={item} onPress={this._itemPress}>
          <CustomTextEllipsize style={styles.commonText} text={item.commonLanguage}/>
        </CustomButton>
        <Animated.View style={[styles.rightEditView, { width: this.editW }]}>
          <CustomButton params={item} onPress={onEditPress}>
            <Image style={styles.commonEditImg} source={require('src/imgC/message/message_edit.png')}/>
          </CustomButton>
          <CustomButton params={{ item, index }} onPress={onSortPress}>
            <Image style={styles.commonSortImg} source={require('src/imgC/message/message_sort.png')}/>
          </CustomButton>
        </Animated.View>
      </Animated.View>
    )
  }

  componentDidMount () {
    const { showDelete, showEdit } = this.props
    if (showDelete) {
      this.deleteW.setValue(deleteW)
    }
    if (showEdit) {
      this.editW.setValue(editW)
    }
  }

  componentDidUpdate (prevProps, prevState, snapshot) {
    console.info('componentDidUpdate', prevProps, prevState)
    if (prevProps.showDelete !== this.props.showDelete) { // 删除按钮的变化
      if (this.props.showDelete) {
        this._animateStart(this.deleteW, deleteW)
      } else {
        this._animateStart(this.deleteW, 0)
      }
    }
    if (prevProps.showEdit !== this.props.showEdit) { // 编辑按钮的变化
      if (this.props.showEdit) {
        this._animateStart(this.editW, editW)
      } else {
        this._animateStart(this.editW, 0)
      }
    }
  }

  _itemPress = (item) => {
    const { itemPress, showDelete, showEdit } = this.props
    if (!showDelete && !showEdit) {
      itemPress && itemPress(item)
    }
  }

  /**
   * 删除点击
   * @private
   */
  _onDeletePress = () => {
    this.tipModal = showTipModal(this.tipConfig)
  }

  _tipCancel = () => {
    this.tipModal.close()
  }

  /**
   * 确定删除
   * @private
   */
  _tipConfirm = () => {
    const { item, userId, deleteCompleted } = this.props
    this.tipModal.close(() => {
      ShowLoading()
      const promise = deleteCommonLanguage({ params: { id: item.id, userId } })
      promise.then((data) => {
        console.info(data)
        DismissLoading()
        deleteCompleted && deleteCompleted(data.data)
      }).catch(() => {
        DismissLoading()
      })
    })
  }

  /**
   * 向下排序
   */
  sortDown = (callback) => {
    this._itemSort(false, callback)
  }

  /**
   * 向上排序
   */
  sortUp = (callback) => {
    this._itemSort(true, callback)
  }

  /**
   * 排序
   * @private
   */
  _itemSort = (up, callback) => {
    const { itemH } = this.props
    this._animateStart(this.itemH, up ? (-itemH) : itemH, () => {
      this.itemH.setValue(0)
      callback && callback()
    })
  }

  _animateStart = (object, toValue, callback) => {
    Animated.timing(
      object,
      {
        toValue: toValue, // 透明度动画最终值
        duration: animateTime, // 动画时长毫秒
        easing: Easing.linear
      }
    ).start(callback)
  }
}

const styles = StyleSheet.create({
  commonItem: {
    paddingHorizontal: ScaleS(20),
    borderColor: '#EFEFEF',
    borderStyle: 'solid',
    borderBottomWidth: ONE_PIXEL,
    flexDirection: 'row',
    alignItems: 'center'
  },
  deleteTextImg: {
    width: ScaleS(20),
    height: ScaleS(20)
  },
  commonWordTextBtn: {
    flex: 1
  },
  commonText: {
    fontSize: ScaleT(14),
    color: '#666666'
  },
  rightEditView: {
    flexDirection: 'row',
    alignItems: 'center',
    overflow: 'hidden'
  },
  commonEditImg: {
    width: ScaleS(13),
    height: ScaleS(13),
    marginHorizontal: ScaleS(20)
  },
  commonSortImg: {
    width: ScaleS(13),
    height: ScaleS(13)
  }
})
